<template>
<div class="w-full h-full">
  <el-timeline>
    <el-timeline-item v-for="(event, index) in events" :key="index" :timestamp="event.year" placement="bottom"
      type="primary" color="#48b5fd" size="large" icon="el-icon-more" center hollow=event.hollow>
      <div class="event-wrapper"> <!-- 添加一个新的wrapper容器 -->
        <div class="event-content">
          <div>{{ event.timestamp }}</div>
          <div>{{ event.content }}</div>
        </div>
      </div>
    </el-timeline-item>
  </el-timeline>
  <div id="main" ref="target" class="w-full h-full"></div>
</div>

</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      events: [
        { year: '2019年6月', timestamp: '2024.06.08 19:15', content: '核查运行情况', hollow: true, },
        { year: '2020年3月', timestamp: '2024.06.08 19:05', content: '启动应急预案', hollow: true, },
        { year: '2022年11月', timestamp: '2024.06.08 19:00', content: '四川广元发生地震震级4.3级', hollow: true, },
      ],
    };
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      var chartDom = document.getElementById('main');
      // const chartDom = echarts.init(this.$refs.target);
      var myChart = echarts.init(chartDom, 'dark');
      const option = {
        title: {
          // text: 'Stacked Area'
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(27, 61, 131, 0.8)', // 自定义背景颜色
          borderColor: '86ceff', // 可选：边框颜色
          borderWidth: 1, // 可选：边框宽度
          textStyle: {
            color: '#a5dbff' // 可选：设置 tooltip 文本颜色
          }
        },
        legend: {
          data: ['昨日负荷曲线', '今日负荷曲线'],
          textStyle: {
            color: '#FFF' // 设置标题的字体颜色
          }
        },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },

        xAxis: {
          type: 'category',
          data: ['0小时', '4小时', '6小时', '8小时', '10小时', '12小时', '14小时'],
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed', // 设置为虚线
              color: 'rgba(26, 82, 114, 0.5)' // 设置颜色为深色，透明度为0.5
            }
          },
          axisLabel: {
            show: true // 隐藏X轴刻度
          }
        },
        yAxis: {
          type: 'value',
          name: '单位：MW',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed', // 设置为虚线
              color: 'rgba(26, 82, 114, 0.5)' // 设置颜色为深色，透明度为0.5
            }
          }
        },
        series: [
          {
            name: '今日负荷曲线',
            data: [20, 30, 20, 25, 20, 25, 20],
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 4,
              color: 'rgba(243, 154, 52, 0.8)' // 设置线条颜色
            },
            areaStyle: {
              gradient: true,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(243, 154, 52, 0.8)' },
                  { offset: 1, color: 'rgba(235, 144, 220, 0)' } // 注意RGBA色值正确
                ]
              }
            },
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              color: 'rgb(243, 154, 52)' // 设置折点颜色
            }
          },
          {
            name: '昨日负荷曲线',
            data: [35, 25, 30, 35, 30, 35, 30],
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 4,
              color: 'rgba(85, 170, 255, 0.8)' // 设置线条颜色
            },
            areaStyle: {
              gradient: true,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(85, 170, 255, 0.8)' },
                  { offset: 1, color: 'rgba(85, 170, 255, 0)' }
                ]
              }
            },
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              color: 'rgba(43, 170, 243)' // 设置折点颜色
            }
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
/*div长度根据内容适应 */
/*.event-wrapper {
  display: flex;
 使用flex布局
  align-items: center;
}
 */
.event-content {

  background: linear-gradient(to right, rgb(27, 61, 131), rgba(15, 25, 43, 0));
  border-radius: 10px;
  padding: 14px 20px;
  color: #86ceff;
  margin: 2px 0;
  box-shadow: 0 0 10px linear-gradient(to right, rgb(74, 168, 233, 1), rgba(0, 0, 0, 0));
}

/*   
<!-- 线颜色 -->
    .el-timeline{
    --el-timeline-node-size-normal: 12px;
    --el-timeline-node-size-large: 14px;
    --el-timeline-node-color: #0c4ac5;
    font-size: var(--el-font-size-base);
    list-style: none;
    margin: 0;
}

*/
/* 线颜色 */
.el-timeline {
  --el-timeline-node-color: #5e92fc;
}
/* 时间标题 */
</style>
